<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>编辑站点</title>
	<link rel="stylesheet" href="/admin/src/css/layui.css">
	<style>
		.mr10{
			display: inline-block;
		}
		.layui-form-label{
			min-width: 100px;
		}

	</style>
</head>

<body >
	<form class="layui-form " style="margin:20px auto;">
		<div class="layui-form-item">
			<label class="layui-form-label">站点名称</label>
			<div class="layui-input-inline">
				<input type="text" name="title" id="title" value="{$info['title']}" lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
				<input type="hidden" name="id" id="id" value="{$info['id']}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">站点联系人</label>
			<div class="layui-input-inline">
				<input type="text" name="contacts" id="contacts" value="{$info['contacts']}"  placeholder="请输入站点联系人" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">站点联系电话</label>
			<div class="layui-input-inline">
				<input type="text" name="telephone" id="telephone" value="{$info['telephone']}"  placeholder="请输入站点联系电话" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">站点状态</label>
		    <div class="layui-input-block">
				<input type="radio" name="is_status" value="1" title="开启" {$info['is_status'] == 1 ? 'checked' : ''}>
				<input type="radio" name="is_status" value="0" title="关闭" {$info['is_status'] == 0 ? 'checked' : ''}>
		    </div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-inline">
				<input type="text" name="remark" id="remark" value="{$info['remark']}"  placeholder="请输入备注" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-upload" style="margin-left: 30px;margin-right: 20px;">
				<button type="button" class="layui-btn" id="test2">站点图片</button>
				<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
					预览图：
					<div class="layui-upload-list" id="demo2">
						{volist name='$info["picture"]' id='item'}
						<img style="width:100px;" src="{$item}" alt="{$item}" class="layui-upload-img">
						{/volist}
					</div>
				</blockquote>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所在区域</label>
			<div class="layui-input-block">
				<div class="fl mr10" style="width:170px;">
					<select name="province_id" id="province_id" lay-verify="required" lay-filter="province_list">
						<option value="0">请选择所在省份</option>
						{volist name='areaList["province_list"]' id='item'}
						<option {$item['id'] == $info['province_id'] ? 'selected':''} value="{$item['id']}" >{$item['name']}</option>
						{/volist}
					</select>
				</div>
				<div class="fl mr10" style="width:170px;">
					<select name="city_id" id="city_id" lay-verify="required" lay-filter="city_list">
						<option value="0">请选择所在城市</option>
						{volist name='areaList["city_list"]' id='item'}
						<option {$item['id'] == $info['city_id'] ? 'selected':''} value="{$item['id']}" >{$item['name']}</option>
						{/volist}
					</select>
				</div>
				<div class="fl mr10" style="width:170px;">
					<select name="district_id" id="district_id"  lay-filter="district_list">
						<option value="0">请选择区/县</option>
						{volist name='areaList["district_list"]' id='item'}
						<option {$item['id'] == $info['district_id'] ? 'selected':''} value="{$item['id']}" >{$item['name']}</option>
						{/volist}
					</select>
				</div>
				<div class="fl mr10" style="width:170px;">
					<select name="street_id" id="street_id" lay-filter="street_list">
						<option value="0">请选择街道/镇</option>
						{volist name='areaList["street_list"]' id='item'}
						<option {$item['id'] == $info['street_id'] ? 'selected':''} value="{$item['id']}" >{$item['name']}</option>
						{/volist}
					</select>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">站点地址</label>
			<div class="layui-input-inline" style="width:600px;">
				<input style="display:inline-block;width:400px;" type="text" name="address" id="address" value="{$info['address']}" lay-verify="required" placeholder="请输入站点地址" autocomplete="off" class="layui-input">
				<button class="layui-btn" id="searchMap">查找位置</button>
			</div>
			<div>
				<input type="hidden" name="longitude" id="longitude" value="{$info['longitude']}" autocomplete="off" class="layui-input">
				<input type="hidden" name="latitude" id="latitude" value="{$info['latitude']}" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div style="margin:0 30px;">
			<div class="layui-form-item">
				<div id="map"  class="panel panel-default" style="height: 450px; margin-top: 0px;"></div>
			</div>
		</div>

	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
	    </div>
	  </div>
	</form>
	<script src="/admin/src/layui.js" ></script>
	<script src="/static/js/jquery-1.8.1.min.js" ></script>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=0yEI5xGxBNZ1D526ReXRSawsSxY1CZdG"></script>
<script>
	var oldLongitude = '{$info["longitude"]}'
	var oldLatitude = '{$info["latitude"]}'
    oldLongitude = oldLongitude ? oldLongitude : 116.397128;
    oldLatitude = oldLatitude ? oldLatitude : 39.916527;
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("map");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(oldLongitude, oldLatitude), 16);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    var marker1 = new BMapGL.Marker(new BMapGL.Point(oldLongitude, oldLatitude));
    map.addOverlay(marker1);
    var geoc = new BMapGL.Geocoder();
    //点击地图
    map.addEventListener('click', function(e){
        //清除地图上所有的覆盖物
        map.clearOverlays();
        var pt = e.latlng;
        var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
        $("#longitude").val(pt.lng);
        $("#latitude").val(pt.lat);
        map.addOverlay(marker);
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            $('#address').val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
        })
    })

	var infoStatus = '{$infoStatus}'
    layui.use(['form','jquery','upload'], function(){
      var form = layui.form ,
		  layer = layui.layer,
          upload = layui.upload,
		  $= layui.jquery;
      var imgList = [];
      var i = 0;
      var getImgList = $("#demo2").children('img');
      for(var k=0;k < getImgList.length; k++){
          imgList[i] = getImgList.eq(k).attr('src');
          i++;
	  }
      if(infoStatus == 0){
		  layer.msg('获取不到对应的信息',{time:1000},function(){
		  		window.parent.frames.location.href="/admin/station/index"
		  })
	  }
	  
	  $(".downpanel").on("click",".layui-select-title",function(e){
		  var $select=$(this).parents(".layui-form-select");

		  $(".layui-form-select").not($select).removeClass("layui-form-selected");
		  $select.addClass("layui-form-selected");
		  e.stopPropagation();
	  }).on("click",".layui-form-checkbox",function(e){
		  e.stopPropagation();
	  });

        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/admin/upload/station/moreImage' //此处配置你自己的上传接口即可
            ,multiple: true
            ,before(){
                i = 0;
                imgList = [];
                $('#demo2').html('');
            }
            ,done: function(res){
                if(res.code == 0){
                    $('#demo2').append('<img style="width:100px;" src="'+ res.data +'" alt="'+ res.data +'" class="layui-upload-img">')
                    imgList[i] = res.data;
                    i++;
                }else{
                    layer.msg(res.message);
                }
            }
        });

        form.on('select', function (data) {
            //如果选中的是省
            if (data.elem.name == "province_id") {
                setAreaInfo(data.value,'city_id');
            }else if (data.elem.name == "city_id") {
                setAreaInfo(data.value,'district_id');
            }else if (data.elem.name == "district_id") {
                setAreaInfo(data.value,'street_id');
            }
        });
        function setAreaInfo(parent_id,level_name) {
            $.ajax({
                url : '/admin/area/allList',
                type : 'post',
                data : {'parent_id':parent_id},
                success : function (backData) {
                    if(backData['code'] == 0){
                        var dataList = backData['data'];
                        var setContent = '';
                        for(i in dataList){
                            if(dataList[i]['id']){
                                setContent = setContent +  '<option value="'+dataList[i]['id']+'">'+dataList[i]['name']+'</option>';
                            }
                        }
                        if(level_name == 'province_id'){
                            $("#province_id").append(setContent);
                            $("#city_id").empty().append('<option value="0">请选择所在城市</option>');
                            $("#district_id").empty().append('<option value="0">请选择所在区/县</option>');
                            $("#street_id").empty().append('<option value="0">请选择所在街道/镇</option>');
                            form.render('select'); // 渲染所在容器内的 select 元素
                        }else if(level_name == 'city_id'){
                            $("#city_id").empty().append('<option value="0">请选择所在城市</option>').append(setContent);
                            $("#district_id").empty().append('<option value="0">请选择所在区/县</option>');
                            $("#street_id").empty().append('<option value="0">请选择所在街道/镇</option>');
                            form.render('select'); // 渲染所在容器内的 select 元素
                        }else if(level_name == 'district_id'){
                            $("#district_id").empty().append('<option value="0">请选择所在区/县</option>').append(setContent);
                            $("#street_id").empty().append('<option value="0">请选择所在街道/镇</option>');
                            form.render('select'); // 渲染所在容器内的 select 元素
                        }else if(level_name == 'street_id'){
                            $("#street_id").empty().append('<option value="0">请选择所在街道/镇</option>').append(setContent);
                            form.render('select'); // 渲染所在容器内的 select 元素
                        }
                    }
                }
            })
        }


      //监听表单提交
      form.on('submit(formDemo)', function(data){
		var postData = data.field;
		postData.picture =  imgList;
		if(!postData['longitude']){
			layer.msg('请查找位置，设置经纬度');
			return false
		}
		if(!postData['latitude']){
			layer.msg('请查找位置，设置经纬度');
			return false
		}
		$.ajax({
			url: '/admin/station/update/data',
			type: 'POST',
			data:postData,
			success : function (backData) {
			  if(backData['status'] == 200){
				  layer.msg(backData.message,{time:1200},function(){
					  window.parent.frames.location.href="/admin/station/index"
				  })
				  
			  }else{
				  layer.msg(backData.message);
			  }
			}
		})
        return false;
      });
        //设置地图位置
        $("#searchMap").click(function(data){
            var allAddress = '';
            if( $("#province_id").val() > 0){
                allAddress =allAddress + $("#province_id").find("option:selected").text();
            }
            if( $("#city_id").val() > 0){
                allAddress = allAddress + $("#city_id").find("option:selected").text();
            }
            if( $("#district_id").val() > 0){
                allAddress = allAddress + $("#district_id").find("option:selected").text();
            }
            if( $("#street_id").val() > 0){
                allAddress = allAddress + $("#street_id").find("option:selected").text();
            }
            if( $("#address").val()){
                allAddress = allAddress + $("#address").val();
            }
            if(allAddress == ''){
                layer.msg('请设置地址');
                return false;
            }
            var lng = '';
            var lat = '';

            $.ajax({
                url: '/admin/common/seat/getSeat',
                type: 'POST',
                data: {address:allAddress},
                success : function (backData) {
                    //添加成功
                    if(backData['status'] == 200){
                        lng = backData['data']['location']['lng'];
                        lat = backData['data']['location']['lat'];
                        $("#longitude").val(lng);
                        $("#latitude").val(lat);
                        map.clearOverlays();
                        map.centerAndZoom(new BMapGL.Point(lng, lat), 16);
                        var marker2 = new BMapGL.Marker(new BMapGL.Point(lng, lat));
                        map.addOverlay(marker2);
                    }else{
                        layer.msg(backData.message);
                    }
                }
            });
            return false;
        });
    });

</script>
</body>
</html>
